<template>
  <div class="list">
    <div class="goods">
      <router-link :to="{path: '/details',query: {item: item}}" v-for="(item,index) in currenList" class="item" :v-key="index">
        <img :src="item.url" alt="">
        <p class="title">{{item.name}}</p>
        <p class="price">￥{{item.price}}</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodList",
  data(){
    return{
      currenList: [],
      list: [
        {
          id: '0',
          list:[
            {
              name:"龙蛋",
              url:"http://www.zishayy.com/UserFiles/shopsimg2/12543.jpg",
              detailList:[
                "http://www.zishayy.com/UserFiles/shopsimg/125431.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/125432.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/125433.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/125434.jpg",
              ],
              price: "99.00"
            },
            {
              name:"香梅三式",
              url:"http://www.zishayy.com/UserFiles/shopsimg2/12538.jpg",
              detailList:[
                "http://www.zishayy.com/UserFiles/shopsimg/125382.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/125383.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/125384.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/125385.jpg",
              ],
              price: "199.00"
            },
            {
              name:"新妆",
              url: "http://www.zishayy.com/UserFiles/shopsimg2/12542.jpg",
              detailList: [
                "http://www.zishayy.com/UserFiles/shopsimg/125422.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/125423.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/125424.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/125425.jpg"
              ],
              price: "150.00"
            },
            {
              name: "追云松",
              url: "http://www.zishayy.com/UserFiles/shopsimg2/12536.jpg",
              detailList: [
                "http://www.zishayy.com/UserFiles/shopsimg/125362.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/125363.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/125364.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/125365.jpg"
              ],
              price: "200.00"
            }
          ],
        },
        {
          id: '1',
          list: [
            {
              name:"紫砂品茶宠摆精",
              url:"https://gd2.alicdn.com/imgextra/i3/2209525186598/O1CN01EdhUWa1ybvxGmir9b_!!2209525186598-0-scmitem176000.jpg_400x400.jpg",
              detailList:[
                "https://gd3.alicdn.com/imgextra/i3/2209525186598/O1CN01sL3cOI1ybvxN2FzOC_!!2209525186598-0-scmitem176000.jpg_400x400.jpg",
                "https://gd4.alicdn.com/imgextra/i2/2209525186598/O1CN01Xjzru01ybvxQPn2mH_!!2209525186598-0-scmitem176000.jpg_400x400.jpg",
                "https://gd2.alicdn.com/imgextra/i3/2209525186598/O1CN01sY4gmF1ybvxTqxfZp_!!2209525186598-0-scmitem176000.jpg_400x400.jpg",
                "https://gd2.alicdn.com/imgextra/i4/2209525186598/O1CN012OyQQE1ybvxN2GvYO_!!2209525186598-0-scmitem176000.jpg_400x400.jpg",
              ],
              price: "49.00"
            },
            {
              name: "宜兴紫砂三足金蟾蜍",
              url: "https://img.alicdn.com/imgextra/i2/2067351717/O1CN01fg4sTm1OYQktTF8To_!!2067351717.jpg",
              detailList: [
                "https://img.alicdn.com/imgextra/i4/2067351717/O1CN01lQPEe11OYQkxmPowP_!!2067351717.jpg",
                "https://img.alicdn.com/imgextra/i4/2067351717/O1CN0175FXua1OYQkvbMPRB_!!2067351717.jpg",
                "https://img.alicdn.com/imgextra/i1/2067351717/O1CN01myXExz1OYQl0kJKjW_!!2067351717.jpg",
                "https://img.alicdn.com/imgextra/i1/2067351717/O1CN01QTr96V1OYQl47BIvA_!!2067351717.jpg"
              ],
              price: "355.00"
            },
            {
              name: "紫砂茶宠可爱小老虎",
              url: "https://gd1.alicdn.com/imgextra/i4/776833280/O1CN01qyjCz71a6HiyzUEOx_!!776833280.jpg_400x400.jpg",
              detailList: [
                  "https://gd1.alicdn.com/imgextra/i4/776833280/O1CN01qyjCz71a6HiyzUEOx_!!776833280.jpg_400x400.jpg",
                  "https://img.alicdn.com/imgextra/i1/776833280/O1CN01yrfs7v1a6HiyzZfTa_!!776833280.jpg"
              ],
              price: "288.00"
            },
            {
              name: "茶宠禅意小和尚",
              url: "https://g-search2.alicdn.com/img/bao/uploaded/i4/i4/212720991/O1CN01VoGiKp1JBv8KzDidT_!!212720991.jpg_580x580Q90.jpg_.webp",
              detailList: [
                  "https://img.alicdn.com/imgextra/i4/212720991/O1CN01H0PBD91JBv9hAFTtQ_!!212720991.jpg",
                  "	https://img.alicdn.com/imgextra/i2/212720991/O1CN01RdBxzA1JBv9f3buJH_!!212720991.jpg"
              ],
              price: "158.00"
            }
          ]
        },
        {
          id: '2',
          list: [
            {
              name: " 古韵紫砂功夫茶具套装",
              url: "https://img.alicdn.com/imgextra/i3/2934138215/O1CN01K2LRBG2AYWFgfH5Ko_!!2934138215.jpg",
              detailList: [
                  "https://img.alicdn.com/imgextra/i3/2934138215/O1CN01K2LRBG2AYWFgfH5Ko_!!2934138215.jpg",
                  "https://img.alicdn.com/imgextra/i1/2934138215/O1CN01ayul0A2AYWFdZVUo3_!!2934138215.jpg"
              ],
              price: "299.00"
            },
            {
              name: "紫砂功夫茶具茶盘现代简约",
              url: "https://img.alicdn.com/imgextra/i3/2934138215/O1CN01adFf9o2AYWJPuhOrA_!!2934138215.jpg_430x430q90.jpg",
              detailList: [
                  "https://img.alicdn.com/imgextra/i4/2934138215/O1CN01ZxhsFL2AYWJPujcC1_!!2934138215.jpg",
                  "https://img.alicdn.com/imgextra/i1/2934138215/O1CN01ZaRa3E2AYWJP9NtD6_!!2934138215.jpg"
              ],
              price: "498.00"
            }
          ]
        },
        {
          id: '3',
          list: []
        },
        {
          id: '4',
          list: [
            {
              name: "凤凰单枞乌龙茶叶",
              url: "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=606418541,874157036&fm=199&app=68&f=JPEG?w=750&h=750&s=AD12699798DA4BEF620D74F3030030E0",
              detailList: [
                  "https://t10.baidu.com/it/u=935966063,4276770842&fm=199&app=68&f=JPEG?w=750&h=750&s=92ABDB05800BE2E6463418B70300A040",
                  "https://t12.baidu.com/it/u=4240477025,3159990384&fm=199&app=68&f=JPEG?w=750&h=750&s=27A047A5F44A1AEC161DCC8F0300F051"
              ],
              price: "99.00"
            },
            {
              name: "首日芽福鼎白茶白毫银针茶",
              url: "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=824027513,2302189213&fm=199&app=68&f=JPEG?w=750&h=750&s=AFD18B5C554A6F4D44C8FD500300C0F3",
              detailList: [
                  "https://t10.baidu.com/it/u=3914155736,2539047213&fm=199&app=68&f=JPEG?w=750&h=1108&s=5203B140822788EF6A59791D0300D0C0",
                  "https://t10.baidu.com/it/u=1247635055,484501517&fm=199&app=68&f=JPEG?w=750&h=1161&s=C0511ED0C7CC4EEC41E9AD530300C0F3"
              ],
              price: "199.00"
            }
          ]
        },
        {
          id: '5',
          list:[
            {
              name: "一剪梅",
              url: "http://www.zishayy.com/UserFiles/shopsimg2/12051.jpg",
              detailList: [
                "http://www.zishayy.com/UserFiles/shopsimg/120511.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/120512.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/120513.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/120514.jpg",

              ],
              price: "150.00"
            },
            {
              name: "唐羽",
              url: "http://www.zishayy.com/UserFiles/shopsimg2/10098.jpg",
              detailList: [
                "http://www.zishayy.com/UserFiles/shopsimg/100981.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/100982.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/100983.jpg"
              ],
              price: "99.00"
            },
            {
              name: "玉舞",
              url: "http://www.zishayy.com/UserFiles/shopsimg2/11958.jpg",
              detailList: [
                "http://www.zishayy.com/UserFiles/shopsimg/119582.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/119583.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/119584.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/119585.jpg"
              ],
              price: "100.00"
            },
            {
              name: "美人肩",
              url: "http://www.zishayy.com/UserFiles/shopsimg2/11922.jpg",
              detailList: [
                "http://www.zishayy.com/UserFiles/shopsimg/119221.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/119222.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/119223.jpg",
                "http://www.zishayy.com/UserFiles/shopsimg/119224.jpg"
              ],
              price: "199.00"
            }
          ]
        },
        {
          id: '6',
          list:[
            {
              name: "圆珠壶",
              url: "http://static.sxzisha.com/UploadFiles/ZiShaGoods/thumbnail_29537.jpg",
              detailList:[
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_29537_2.jpg",
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_29537_3.jpg",
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_29537_4.jpg",
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_29537_5.jpg"
              ],
              price: "99.00"
            },
            {
              name: "僧帽壶",
              url: "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_29536_1.jpg",
              detailList: [
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_29536_2.jpg",
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_29536_3.jpg",
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_29536_4.jpg",
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_29536_5.jpg",
              ],
              price: "129.00"
            },
            {
              name: "竹鹤回春",
              url: "http://static.sxzisha.com/UploadFiles/ZiShaGoods/thumbnail_37149.jpg",
              detailList: [
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_37149_2.jpg",
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_37149_3.jpg",
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_37149_4.jpg",
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_37149_5.jpg",
              ],
              price: "99.00"
            },
            {
              name: "汉云壶",
              url: "http://static.sxzisha.com/UploadFiles/ZiShaGoods/thumbnail_80202.jpg",
              detailList: [
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_80202_2.jpg",
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_80202_3.jpg",
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_80202_4.jpg",
                "http://static.sxzisha.com/UploadFiles/ZiShaGoods/pictures_80202_5.jpg"
              ],
              price: "119.00"
            }
          ]
        },
        {
          id: '7',
          list: []
        }
      ],

    }
  },
  watch:{
    $route: {
      handler(n,o) {
        this.list.forEach(item=>{
          if(item.id === n.params.id){
            this.currenList = item.list
          }
        })
      },
      deep: true,
      // 代表在wacth里声明了这个方法之后立即先去执行handler方法
      immediate: true
    }
  }
}
</script>

<style scoped lang="less">
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
.item{
  width: 45%;
//padding-bottom: 10px;
  background-color: white !important;
  padding: 5px;
  margin-bottom: 10px;
  img{
    width: 100%;
    height: 150px;
  }
}
  .title{
    color: black;
  }
  .price{
    color: #F40;
  }
}
</style>
